<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<html lang="en">
<head>
	<link href="${pageContext.request.contextPath}/resource/css/def/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/resource/css/def/ztree/metro.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/jquery.ztree.all-3.5.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/datatables/js/jquery.dataTables.js"></script>
	<script src="${pageContext.request.contextPath}/resource/js/jquery/plugin/handlebars-v3.0.1.js"></script>
	<script type="text/javascript">
		 var hadPermission = {'search':false};
		 <shiro:hasPermission name="sysOrgController/selectOrgRole">
		 hadPermission.search = true;
		 </shiro:hasPermission>
	</script>
</head>
<script type="text/javascript">

//权限树
var permissionTree = null;
// 组织树
var orgTree = null;


////////// 	权限数展示       ///////////////////////
// 权限树设置
var permissionSetting = {
	check: {
		enable: true,
		chkboxType: {
			"Y":'ps', "N":'ps'
		}
	},
	view: {
		selectedMulti: true
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		beforeClick: function(treeId, treeNode) {
			
		}
	}
};
// 组织树设置
var orgSetting = {
	view: {
		selectedMulti: false
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		beforeClick: function(treeId, treeNode) {
			$('#orgIdObj').val(treeNode.id);
			$('#orgNameObj').val(treeNode.name);
			$('#orgCloseModal').click();
		}
	}
};

//后面构建btn 代码
var btnModel = '    \
	{{#each func}}\
    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>\
    {{/each}}';
var template = Handlebars.compile(btnModel);
var searchTable;
//var orgCode;

$(function(){
	
	//orgCode = $('#orgCode').val();
	
	// 加载表格
	searchTable = $("#searchTable").DataTable(dataTableConfig);
	//searchTable.ajax.reload();
});

// 表格配置信息
var dataTableConfig = {
	"ordering": false,// 排序
	"serverSide": true,// 开启服务器模式
	"scrollX": true,// 横向滚动
	ajax: {
        "type": "POST",
        "url":'selectOrgRole.action',//请求路径
        "contentType": 'application/x-www-form-urlencoded; charset=UTF-8',
        "dataType":'json',
        "data":function(d){// 查询参数
        	d.name = $('#sysRoleName').val();
            d.orgId = $('#orgId').val();
        	return d;
        }
	},            
	columns: [// 对应列
        {"data": "name"},
        {"data": "deptName"},
        {"data": null}
    ],
    "columnDefs": [
		{// 所有列默认值
			"targets": "_all",
			"defaultContent": ''
		},
       {// 最后一列添加按钮
        targets: -1,
        render: function (a, b, c, d) {
        	var btnArray = new Array();
        	if(hadPermission.search){
        		btnArray.push({"name": "详细信息", "fn": "showEditPage(\'" + c.id + "\')", "type": "primary"});
        	}
            var context =
            {
                func: btnArray
            };
            var html = template(context);
            return html;
        }
    }]
	,"dom": 'rt<"bottom"ip><"clear">' //生成样式
};

//查询
function serarch(){
	searchTable.ajax.reload();
}

//展示详细信息页面
function showEditPage(id){
	$.post('searchRoleById.action',{'id':id},function(data){
		permissionTree = $.fn.zTree.init($("#permissionTree"), permissionSetting, data.sysRolePermission);
		permissionTree.expandAll(true);
		var sysRole = data.sysRole;
		$('#idRole').val(sysRole.id);
		$('#nameRole').val(sysRole.name);
		$('#orgNameObj').val(data.orgName);
		$('#orgIdObj').val(sysRole.orgId);
		var sysRolePermission = data.sysRolePermission;
		var ids = '';
		for(var per in sysRolePermission){
			ids += ',' + sysRolePermission[per].id;
			$('#permissionNameUl').append('<li class="list-group-item">\
				    '+sysRolePermission[per].name+'\
				    <span class="glyphicon glyphicon-remove move-left" aria-hidden="true" data_id="'
					    +sysRolePermission[per].id+'" ></span>\
				  </li>');
		}
		if('' != ids){
			ids = ids.substr(1);
		}
		//var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		var str = data['str'];
		if(str!=null){
			for (var i=0; i < str.length; i++) {
				permissionTree.checkNode(permissionTree.getNodeByParam("id",str[i]), true);
		     }
		}
		$('#permissions').val(ids);
		$('#updateBtn').show();
//		$('#showRole').click();
		$('#searchContent').hide();
		$('#roleModal').show();
		$('#permissionNameUl').find('.glyphicon-remove').click(function(){
			var id = $(this).attr('data_id');
			var ids = '';
			var idArray = $('#permissions').val().split(',');
			for(var per in idArray){
				if(id != idArray[per]){
					ids += ',' + idArray[per];
				}
			}
			if('' != ids){
				ids = ids.substr(1);
			}
			$('#permissions').val(ids);
			$(this).parent().remove();
			return false;
		});
	});
}

function backSearch(){
	initFrame();
}

//初始化页面信息
function initFrame(){
	$('#searchContent').show();
	$('#roleModal').hide();
	$('#addBtn').hide();
	$('#updateBtn').hide();
	$('#roleForm input').val('');
	$('#permissionNameUl').empty();
}
</script>
<body>
	<div class="container-fluid" id="searchContent">
		<div class="row">
			<form class="form-inline" method="post" id="sysRoleForm">
				<div class="form-group">
					<label for="sysRoleName" >角色名:</label>
					<input type="text" class="form-control" name="sysRoleName"  size="30px" id="sysRoleName">
					<input type="hidden" name="orgId" id="orgId" value="${orgId}">
				</div>
				<a type="button" class="btn btn-info" onclick="serarch();"><i class="ace-icon glyphicon glyphicon-search"></i>查询</a>
			</form>
		</div>
		<hr>
		
		<div class="row">
			<table id="searchTable" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>角色名</th>
						<th>所属部门</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	
	<button style="display:none" id="showRole" data-toggle="modal" data-target="#roleModal"></button>
	<!-- class="modal fade" -->
	<div  id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" style="display:none;">
		<div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
		        <h4 class="modal-title" id="roleModalLabel">角色组织</h4>
		      </div>
		      <div class="modal-body">
		      	<form action="addRole.action" class="form-horizontal" role="form" id="roleForm">
		      	  <input type="hidden" name="id" id="idRole" >
				  <div class="form-group">
				    <label for="name" class="col-sm-2 control-label">角色名称</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="name" id="nameRole" placeholder="角色名称">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="org_id" class="col-sm-2 control-label">所属部门</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" placeholder="所属部门" data-toggle="modal" data-target="#orgModal"
				      	id="orgNameObj" readonly="readonly">
				      <input type="hidden" name="orgId" id="orgIdObj">
				    </div>
				  </div>
				  <div class="form-group">
				    <label class="col-sm-2 control-label">角色权限</label>
			    	<div class="col-sm-10">
			    		<!--<div class="well" data-toggle="modal" data-target="#permissionModal" id="permissionNameObj">
						    <ul class="list-group" id="permissionNameUl" >-->
						    <ul id="permissionTree" class="ztree" style="width:560px; overflow:auto;"></ul>
							</ul>
						</div>
			      		<input type="hidden" name="permissions" id="permissions">
			    	</div>
				  </div>
				</form>
			     </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default"  id="closeAddModal" onclick="backSearch();">返回</button> 
				</div>
			</div>
		</div>
	</div>
	
	<!-- 组织机构信息 -->
	<div class="modal fade" id="orgModal" tabindex="-1" role="dialog" aria-labelledby="orgModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="orgModalLabel">组织机构信息</h4>
	      </div>
	      <div class="modal-body">
	        <ul id="orgTree" class="ztree" style="width:560px; overflow:auto;"></ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-primary" data-dismiss="modal" id="orgCloseModal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 角色信息 -->
	<div class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="permissionModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="permissionModalLabel">角色信息</h4>
	      </div>
	      <div class="modal-body">
	        <ul id="permissionTree" class="ztree" style="width:560px; overflow:auto;"></ul>
	      </div>
	      <div class="modal-footer">
	        <button type="button"  class="btn btn-primary"  data-dismiss="modal" id="permissionCloseModal" >关闭</button>
	        <button type="button" class="btn btn-primary" onclick="permissionSelected();">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	<%-- 
	  <!-- 1 开始 -->
	<div class="container-fluid">
		<!-- 2 查询form  id必须定义-->
		<form id="contentForm" name="contentForm" method="POST" action="search4PageList.do">
		<input name="name" value="">名称<br>
		<input name="start" value="1">
		<input name="length" value="2">
		</form>
		<!-- 3 局部刷新 -->
		<aa:zone name="countriesList">
			<table class="list_table table_fixed" cellspacing="0" cellpadding="0">
				<tr><th>名字</th><th>顺序号</th></tr>
			<c:forEach var="item" items="${page.list }" varStatus="status">
				<tr <c:if test="${status.count%2==0 }">class="table_bg"</c:if>><td>${item.name }</td><td>${status.count }</td></tr>
			</c:forEach>
			</table>
			
			<!-- 4 定义局部刷新区域的id -->
			<input type="" name="id_zone" value="countriesList">
			<!-- 5 定义局部刷新区域form的id -->
			<input type="" name="id_form" value="contentForm">
			<!-- 6  照抄 -->
			<%@ include file="/WEB-INF/jsp/frm/common/pageHelper.jsp"%>
		</aa:zone>
	</div><!--7  结束 -->
</body>
<script type="text/javascript">
		<!-- <button onclick="flushPage();">刷新</button> -->
/* ajaxAnywhere.formName = "contentForm";
ajaxAnywhere.getZonesToReload = function() {
	return "countriesList";
}
	function flushPage(){
		ajaxAnywhere.submitAJAX()
	} */

</script> --%>
</body>
</html>

